<template>
    <section class="lix-event-wran-main gap-x-4 flex-direction-row">
        <!-- 左侧布局部分  -->
        <div class="flex-direction-column main-left">
            <!-- 工艺配置信息 -->
            <div class="header-title">
                <div class="title-section">
                    <p>
                        <SvgIcon icon-class="location" style="width: 1em; height: 1em;" />
                        线体名称 / 工位名称 / 工位编码
                    </p>
                </div>
                <div class="info-section">
                    <div class="numberTag">
                        <div class="info_title">
                            <span class="responsive-paragraph">配置信息</span>
                        </div>
                        <div class="info-content">
                            <span class="responsive-paragraph">配置1:----------</span>
                        </div>
                        <div class="info-content">
                            <span class="responsive-paragraph">配置2:----------</span>
                        </div>
                        <div class="info-content">
                            <span class="responsive-paragraph">配置3:----------</span>
                        </div>
                        <div class="info-content">
                            <span class="responsive-paragraph">配置4:----------</span>
                        </div>
                        <div class="info-content">
                            <span class="responsive-paragraph">配置5:----------</span>
                        </div>
                    </div>
                    <div class="okStatus">
                        <div class="info_title">
                            <span class="responsive-paragraph">生产计数</span>
                        </div>
                        <div class="status-row">
                            <div class="staus-item ok">
                                <span class="responsive-paragraph ok-text">OK次数</span>
                                <span class="responsive-paragraph ok-count">{{ okCount }}</span>
                            </div>
                            <div class="staus-item ng">
                                <span class="responsive-paragraph ok-text">NG次数</span>
                                <span class="responsive-paragraph ng-count">{{ ngCount }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="CameraTag">
                        <div class="info_title">
                            <span class="responsive-paragraph">操作状态</span>
                        </div>
                        <div class="operateStatus" :class="{
                            'status-operate': WorkStatus === 1,
                            'status-error': WorkStatus === -1,
                            'status-run': WorkStatus !== 1 && WorkStatus !== -1
                        }">
                            <div class="status-text">进行中</div>
                            <SvgIcon
                                :icon-class="WorkStatus === 1 ? 'operate_status' : WorkStatus === -1 ? 'error_status' : 'run'"
                                style="width: 3.5rem;height: 3.5rem;" />
                        </div>
                    </div>
                </div>
            </div>
            <!--  操作历史查询组件-->
            <section class="card-border flex-direction-row">
                <div class="flex-direction-column phone-photo">
                    <h4 class="sub-title">
                        <div>
                            {{ $t('操作历史查询') }}
                        </div>
                    </h4>
                    <DataGatheringList ref="warnVideoListDom" :cameraIp="activeCamera" @getVideoRow="getVideoRow" />
                </div>
            </section>
        </div>
        <!-- 右侧布局部分 -->
        <div class="flex-direction-column main-right">
            <div class="card-border camera-view-wrap">
                <!-- 相机画面部分 -->
                <div class="camera-section" style="height: 65%;">
                    <div class="flex flex-1 flex-col gap-y-2 xl:h-full">
                        <div class="flex-1 grid gap-2 overflow-hidden" :style="{
                            gridTemplateColumns: `repeat(${gridNumberSqrt[0]}, minmax(0, 1fr))`,
                            gridTemplateRows: `repeat(${gridNumberSqrt[1]}, minmax(0, 1fr))`,
                        }">
                            <div v-for="item in cameraScreenList" v-if="cameraScreenList.length" :key="item._id"
                                class="overflow-hidden bg-gray">
                                <CameraScreen :key="item._id" :cameraId="item._id" :online="item.online"
                                    :cameraName="item.alias ?? ''" :osdList="[]" />
                            </div>
                            <el-empty v-else />
                        </div>
                        <div class="flex justify-center align-center  gap-x-2" style="margin-top: -20px;">
                            <el-pagination v-if="!cameraStore.cameraId" v-model:current-page="pagination.currentPage"
                                v-model:page-size="pagination.pageSize" :page-sizes="[4, 16]" :total="cameraStore.total"
                                layout="sizes, prev, pager, next, total" background class="justify-center gap-x-2" />
                            <el-radio-group v-model="cameraStore.queryParams.device_type" @change="handleChangeType"
                                style="margin-top: 18px;">
                                <el-radio-button :label="1">{{ $t('物理相机') }}</el-radio-button>
                                <el-radio-button :label="4">{{ $t('虚拟相机') }}</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
                <!-- 事件信息部分 -->
                <div class="action-section" style="height: 35%;">
                    <DataGatheringList_workList ref="resetListDom" :cameraIp="activeCamera"
                        @update:work-status="handleWorkStatusUpdate" />
                </div>
            </div>
        </div>
    </section>
    <VideoDataDialog v-model:video-dialog-visible="videoDialogVisible" :video-url="videoUrl" :img-list="phoneImgList"
        :renderVideo="dialogRenderVideo" :camera-results="cameraResultsTxt" :playStartTime="videoStartTime"
        :gridData="gridData" />
</template>
<script setup lang="ts">
import { socketIoClientInstance } from "@/data-services/socket-io-1";
import type { T_Camera_List_Item } from "./types";
import { getVideoRowCommon, getBaseUrlConfig } from './utils';
import { i18n } from "@/vue-i18n";

import { useCameraStore } from "@/pages/pinia/camera";
const cameraStore = useCameraStore();

const $t = i18n.global.t;
const cameraViewData = ref<T_Camera_List_Item[]>();
const resetListDom = ref()
const currentDate = new Date();
const endDate = new Date(currentDate);
const { fullHost } = getBaseUrlConfig()
currentDate.setHours(0, 0, 0, 0);
endDate.setHours(23, 59, 59, 999);
const WorkStatus = ref();
// 生产计数
const ngCount = ref(0)
const okCount = ref(0)
const videoDialogVisible = ref(false)
const videoUrl = ref('')
const gridData = ref([]);
const videoCameraIp = ref('')
const phoneImgList = ref<Array<string>>([])
const dialogRenderVideo = ref(true)
const cameraResultsTxt = ref<T_RectGraphResultItem[]>([])
const videoStartTime = ref(0)
const pagination = reactive({
    currentPage: 1,
    pageSize: parseInt(localStorage.getItem('eventWarnPageSize') || '16'),
});
const paramsByPagination = computed(() => ({
    pageNumber: pagination.currentPage,
    entriesPerPage: pagination.pageSize,
}));

const cameraScreenList = computed(() => {
    return cameraStore.cameraId
        ? [{ _id: cameraStore.cameraId, online: true }]
        : cameraStore.cameraList;
});

const gridNumberSqrt = computed(() => {
    const len = cameraScreenList.value.length;
    switch (len) {
        case 0:
        case 1:
            return [1, 1];
        case 2:
            return [2, 1];
        default: {
            const sqrt = Math.ceil(Math.sqrt(pagination.pageSize));
            return [sqrt, sqrt];
        }
    }
});
function handleChangeType() {
    handleQuery(paramsByPagination.value)
}

function handleWorkStatusUpdate(newStatus) {
    WorkStatus.value = newStatus; // 更新 WorkStatus 的值
}
async function handleQuery(params: Record<string, any>) {
    await cameraStore.getCameraList({
        ...params,
        condition: { online: true },
    });
    if (!cameraViewData.value?.length) {
        const allList = await getAllCameraList();
        initCameraWarnList(allList);
    }
}
async function getAllCameraList() {
    return await cameraStore.getAllCameraList({
        condition: { online: true },
    });
}


//视频播放
async function getVideoRow(videoRow: T_Warn_List_Row): Promise<void> {
    await getVideoRowCommon(
        videoRow,
        fullHost,
        (value) => videoDialogVisible.value = value,
        (value) => dialogRenderVideo.value = value,
        (value) => videoUrl.value = value,
        (value) => videoCameraIp.value = value,
        (value) => videoStartTime.value = value,
        (value) => cameraResultsTxt.value = value,
    )
}


const initCameraWarnList = (list: Array<T_Camera_List_Item>) => {
    let allList = [...list];
    allList.forEach((item: any) => {
        const sortNum = item.alias && item.alias.match(/\d+/g)
        if (sortNum?.length) {
            item.sortNum = +sortNum[0]
        }
    })
    allList = allList.sort((a: any, b: any) => {
        return (a.sortNum || 0) - (b.sortNum || 0);
    });
    // 将该list里的数据根据alias中的数字进行排序
    cameraViewData.value = allList
};

watch(() => paramsByPagination.value, handleQuery, { immediate: true });
// 监听 pageSize 变化并保存到 localStorage
watch(
    () => pagination.pageSize,
    (newSize) => {
        localStorage.setItem('eventWarnPageSize', newSize.toString());
    }
);

let refreshTimer: number | null = null;
onMounted(async () => {
    refreshTimer = window.setInterval(() => {
        window.location.reload();
    }, 10 * 60 * 1000);
});

onUnmounted(() => {
    socketIoClientInstance.off("xdxk_record_ack");
    refreshTimer && window.clearInterval(refreshTimer);
});
</script>
<style lang="scss">
@use '@/assets/style/button.scss';


.el-form {
    font-size: 20px;
}

.el-input {
    font-size: 20px;
}

.tagSelect .el-select .el-select__wrapper {
    height: 30px;
    font-size: 20px;
    background-color: #FFF;
}

.el-form-item__error {
    font-size: 18px;
}

.warning-content {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
}

#large-font .el-form-item__label {
    font-size: 18px;
}

#large-font .el-form-item__content {
    width: 120px;
}

.warning-icon {
    color: #e6a23c;
    font-size: 24px;
    margin-right: 10px;
}

.dialog-footer {
    text-align: right;
}

.el-dialog__footer {
    text-align: center !important;
}


.lix-event-wran-main {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0px;
    overflow: hidden;

    .main-left {
        flex: 0 0 45%;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;

        .header-title {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 20px;
            z-index: 12;

            .title-section {
                margin-bottom: 15px;

                p {
                    color: #FFF;
                    font-size: 18px;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    letter-spacing: 1px;

                    .svg-icon {
                        flex-shrink: 0;
                        vertical-align: middle;
                    }
                }
            }

            .info-section {
                display: flex;
                align-items: stretch;
                justify-content: space-between;
                gap: 10px;

                // 设置三个区域的最低长度
                .numberTag,
                .okStatus,
                .CameraTag {
                    flex: 1;
                    min-width: 160px;
                    min-height: 250px;
                }
            }
        }

        .card-border {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 14px 20px;
            height: calc(100% - 200px);

            .phone-photo {
                flex: 1;
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 0;

                .sub-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                    margin-bottom: 10px;
                    color: #FFF;
                    text-shadow: 0px 0.5px 0px #B6B0A8;
                    font-size: 18px;

                    .svg-icon {
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                }
            }
        }
    }

    .main-right {
        flex: 0 0 53%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-right: 20px;
        gap: 10px;

        .camera-view-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            padding: 5px 15px 15px 15px;
            overflow: hidden;
            z-index: 99;

            .camera-section {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-height: 0;
                margin-bottom: 10px;
            }

            .action-section {
                min-height: 0;
                display: flex;
                flex-direction: column;
                margin-top: 10px;
            }
        }
    }

    .card-border {
        border-radius: 10px;
        background: #2d2d2d;
    }

    .main-left,
    .main-right {
        height: 100%;
    }

    .numberTag {
        border: 1px solid #444;
        border-radius: 10px;
        background: #2d2d2d;
        padding: 10px;
        color: rgba(255, 255, 255, 0.04);
        font-style: normal;
        font-size: 24px;
        font-weight: 400;
        text-shadow: 0px 0.5px 0px #B6B0A8;
    }

    .info_title {
        background-image: url(../../assets/icons/svg/title_bgc.svg);
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 15px;

        span {
            display: flex;
            align-items: center;
            height: 100%;
            color: #FFF;
            font-size: 16px;
            font-weight: 500;
        }
    }

    .info-content {
        margin: 15px 0;
        padding: 0 15px;

        span {
            color: rgba(255, 255, 255, 0.04);
            font-size: 18px;
            font-weight: 400;
        }
    }

    .ok-text {
        color: rgba(255, 255, 255, 0.68) !important;
        font-size: 19px;
        font-family: 400;
        line-height: 24px;
        display: inline-block;
        padding: 0 1.2em 0.6em 1.2em;
    }

    .ok-count {
        color: rgba(118, 204, 102) !important;
        font-size: 40px !important;
        font-weight: 600 !important;
    }

    .ng-count {
        color: rgba(240, 81, 81) !important;
        font-size: 40px !important;
        font-weight: 600 !important;
    }


    /* 搜索按钮样式 */
    .el-button {
        width: 110px;
        height: 36px;
        background-color: rgb(50, 50, 50);
        color: #36B5AC;
        border: 1px solid #36B5AC;
        flex: none;
        order: 1;
        flex-grow: 0;
        border-radius: 10px;
        margin-right: 20px;
    }

    .CameraTag {
        display: flex;
        flex-direction: column;
        border: 1px solid #444;
        border-radius: 10px;
        background: #2d2d2d;
        padding: 12px;
        color: #FFF;
        font-style: normal;
        font-size: 22px;
        font-weight: 400;
        text-shadow: 0px 0.5px 0px #B6B0A8;

        .operateStatus {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15px 20px;
            gap: 10px;
            width: 100%;
            flex: none;
            order: 0;
            align-self: stretch;
            flex-grow: 1;
            margin-top: 10px;

            .status-text {
                color: rgba(255, 255, 255, 0.04);
                font-size: 20px;
                font-weight: 500;
                text-align: center;
            }

            // 不同状态的背景颜色
            &.status-operate {
                background: rgba(60, 184, 35, 0.14);
            }

            &.status-error {
                background: rgba(243, 94, 94, 0.12);
            }

            &.status-run {
                background: rgba(74, 164, 237, 0.1);
            }

            .svg-icon {
                position: relative;
                width: 60px;
                height: 60px;
                flex: none;
                order: 0;
                flex-grow: 0;

                /* 状态指示器圆形背景 */
                &::before {
                    content: '';
                    position: absolute;
                    width: 36px;
                    height: 36px;
                    left: calc(50% - 36px/2 + 0.5px);
                    top: calc(50% - 36px/2);
                    background: radial-gradient(50% 50% at 50% 50%, #26E300 96.85%, #197307 96.86%);
                    box-shadow: 0px 0px 9.4px #26E301;
                    border-radius: 50%;
                    z-index: 1;
                }

                /* SVG图标样式 */
                svg {
                    position: relative;
                    z-index: 2;
                    width: 29px;
                    height: 29px;
                    left: calc(50% - 29px/2 + 0.5px);
                    top: calc(50% - 29px/2);
                }
            }
        }
    }

    .okStatus {
        border: 1px solid #444;
        border-radius: 10px;
        background: #2d2d2d;
        color: rgba(255, 255, 255, 0.04);
        padding: 12px;
        font-style: normal;
        font-size: 26px;
        font-weight: 300;
        display: flex;
        flex-direction: column;

        .status-row {
            display: flex;
            gap: 10px;
            flex-direction: row;
            justify-content: space-between;
            flex: 1;
            margin-top: 10px;
        }


        .staus-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;

            &.ok {
                background: rgba(60, 187, 35, 0.14);
                text-align: center;
                height: 100%;
                flex: 1;
            }

            &.ng {
                background: rgba(243, 94, 94, 0.12);
                height: 100%;
                flex: 1;
            }
        }
    }


    @keyframes heartbeat {

        0%,
        100% {
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
        }

        50% {
            box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
        }
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
}

@media screen and (max-width: 1700px) {
    .lix-event-wran-main {
        .main-right {
            .right-top .phone-photo {
                flex: 1; // 0 0 60%;
            }
        }
    }
}

/* 带行高控制 */
.responsive-paragraph {
    font-size: clamp(12px, 1.2vw, 14px);
    // line-height: clamp(1.5, 0.5vw + 1.4, 1.8); 
}

/* 物理相机和虚拟相机单选按钮样式 */
.el-radio-group {
    .el-radio-button {
        .el-radio-button__inner {
            background-color: #2d2d2d;
            border-color: #444;
            color: rgba(255, 255, 255, 0.68);
            font-size: 16px;
            padding: 8px 16px;
            transition: all 0.3s ease;

            &:hover {
                background-color: rgba(54, 181, 172, 0.2);
                border-color: #36B5AC;
                color: #36B5AC;
            }
        }

        &.is-active {
            .el-radio-button__inner {
                background-color: #6AB9B0;
                border-color: #6AB9B0;
                color: #fff;
                box-shadow: 0 0 8px rgba(54, 181, 172, 0.4);
            }
        }
    }
}
</style>
